import '../../css/public.less'
import './Css/AddPromotion/AddPromotion.less'
import React, { useState } from 'react';
import { useLocation } from 'react-router-dom'
import { Button, Form, Input, InputNumber, Select, DatePicker, Switch } from 'antd';
import { time } from 'console';
import getSelectTime from '../../../utils/date';
import {AddPurchaseList} from '../../../api/wj'
interface props{
    trTitle?:string,
    trMileage?:number,
    trType?:number,
    trStart?:string,
    trEnd?:string,
    trGoods?:string,
    trCreate?:string,
    trAdvance?:string,
    trState?:number
}
function AddPurchase() {
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const state = useLocation()
    const rangeConfig = {
        rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
    };
    const config = {
        rules: [{ type: 'object' as const, required: true, message: 'Please select time!' }],
    };
    const [type,setType] = useState<{sportId:number,sportName:string}[]>(state.state)
    //形成选项id
    const [checked,setChecked] = useState<number>()
    //抢购开始时间
    const [TrCreate,setTrCreate] = useState<string>()
    //预上架时间
    const [TrAdvance,setTrAdvance] = useState<string>()
    const selectChange=(value:any, option:any)=>{
        // console.log(option);
        setChecked(option.key)
    }
    console.log('选中的行程id',Number(checked));
    const { RangePicker } = DatePicker;
    /* eslint-disable no-template-curly-in-string */
    const validateMessages = {
        required: '${label} is required!',
        types: {
            email: '${label} is not a valid email!',
            number: '${label} is not a valid number!',
        },
        number: {
            range: '${label} must be between ${min} and ${max}',
        },
    };
    
    //上架下架选择
    const choose=(hecked: boolean)=>{
        console.log(hecked);
        if(hecked){
            setChecked(1)
        }else{
            setChecked(0)
        }
    }
    //抢购开始时间
    const changeTrCreate=(data:any,dateString: string)=>{
        setTrCreate(dateString)
    }
    //预上架时间
    const changeTrAdvance=(data:any,dateString: string)=>{
        setTrAdvance(dateString)
    }
    
    /* eslint-enable no-template-curly-in-string */
    // console.log('state的数据',state.state);
    const onFinish = (values: any) => {
        console.log('valueshfudisfhisf',values);
        let trStart = getSelectTime(values.trStart[0])
        let trEnd =  getSelectTime(values.trStart[1])
        AddPurchaseList({
            trTitle:values.trTitle,
            trMileage:values.trMileage,
            trType:values.trType,
            trStart:trStart,
            trEnd:trEnd,
            trGoods:values.trGoods,
            trCreate:TrCreate,
            trAdvance:TrAdvance,
            trState:values.trState?1:0//判断上架状态
        }).then(res=>{
            console.log('添加陈宫了',res);
        }).catch(err=>{
            console.log('添加报错了',err);
            
        })
    };
    return (
        <div className='Promotionma'>
            {/* 头部 */}
            <div className='page-top'>
                <div className='page-title'>
                    <p>添加抢购</p>
                </div>
            </div>
            <div className='page-content'>
                <div className='Box'>
                    <p>添加抢购</p>
                    <div className='table'>
                        <Form
                            {...layout}
                            name="nest-messages"
                            onFinish={onFinish}
                            style={{ maxWidth: 600 }}
                            validateMessages={validateMessages}
                        >
                            <Form.Item label="抢购标题" name='trTitle' rules={[{ required: true }]}>
                                <Input />
                            </Form.Item>

                            <Form.Item label="所需里程"> 
                                <Form.Item name="trMileage" noStyle>
                                    <InputNumber min={1} max={40} />
                                </Form.Item>
                                <span className="ant-form-text" style={{ marginLeft: 8 }}>
                                    公里
                                </span>
                            </Form.Item>

                            <Form.Item label="适用行程类型" name="trType">
                                <Select onChange={selectChange}>
                                    {/* <Select.Option value="徒步">徒步</Select.Option>
                                    <Select.Option value="登山">登山</Select.Option> */}
                                    {type.map((item) => {
                                        return <Select.Option key={item.sportId} value={item.sportId}>{item.sportName}</Select.Option>
                                    })}
                                </Select>
                            </Form.Item>

                            <Form.Item label="适用商品" name='trGoods' rules={[{ required: true }]}>
                                <Input />
                            </Form.Item>
                            <Form.Item name="trStart" label="上架时间段" {...rangeConfig}>
                                <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                            </Form.Item>

                            {/* <Form.Item name="trCreate" label="抢购开始时间" {...config}>
                                <DatePicker showTime format="YYYY-MM-DD HH:mm:ss"  onChange={changeTrCreate}/>
                            </Form.Item> */}

                            <Form.Item name="trAdvance" label="预上架时间" {...config}>
                                <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" onChange={changeTrAdvance}/>
                            </Form.Item>

                            <Form.Item label="上架" name="trState" valuePropName="checked">
                                <Switch 
                                onChange={choose}/>
                            </Form.Item>

                            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                                <Button type="primary" htmlType="submit">
                                    提交
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default AddPurchase
//添加抢购页面